$(function (){
  // 功能一：渲染文章功能列表
  /* 
   【1】定义函数，发起Ajax请求
   【2】判断请求成功与否
   【3】如果成功，将数组渲染到页面上(art-template)
      [1]引入.js文件
      [2]定义数据
      [3]定义模板
      [4]调用template('模板的id',数据)函数
      [5]将字符串渲染到页面中
  */
 function renderArtCateList(){
  $.ajax({
    url: '/my/article/cates',
    success: function(res){
      if(res.status !==0) return layer.msg(res.message,{icon: 5})
      layer.msg(res.message,{icon: 6})

      const str = template('tpl',res)
      $('tbody').html(str)
    }
  })
 }
 renderArtCateList()

  //  功能二：实现添加文件分类效果
   /* 
   【1】给添加按钮注册点击事件
   【2】显示弹出层
   */
  let addIndex = null
 $('#btnAddCate').on('click',function(){
  // 显示弹出层
   addIndex = layer.open({
    type: 1,   //设置类型
    title: '添加文章分类',   //设置标题
    area: ['500px','300px'],  //设置宽高
    content: $('#dialog-add').html()   //设置内容
  })
 })

 // 功能三：操作表单
   /* 
     【1】给表单注册submit提交事件
     【2】阻止表单的默认行为
     【3】收集表单数据
     【4】对数据进行校验
     【5】发起Ajax请求
     【6】判断请求成功与否
     【7】将数据添加到页面中(重新渲染函数)
     【8】关闭弹出层
   */

    // 注意：动态添加的元素需要通过事件委托的形式绑定事件
  $('body').on('submit','#form-add',function(e){
    e.preventDefault()
    const data = $(this).serialize()
    $.ajax({
      method: 'post',
      url: '/my/article/addcates',
      data,
      success: function(res){
        if(res.status !==0) return layer.msg(res.message,{icon: 5})
        layer.msg(res.message,{icon: 6})

        renderArtCateList()
        layer.close(addIndex)
      }
    })
  })

  // 功能四：实现编辑效果
  /* 
    【1】给编辑按钮注册事件
    【2】显示弹框

  */
  let editIndex = null
  $('body').on('click','.btn-edit',function(){
    editIndex = layer.open({
      type: 1,   //设置类型
      title: '编辑文章分类',   //设置标题
      area: ['500px','300px'],  //设置宽高
      content: $('#dialog-edit').html()   //设置内容
    })
    // 获取编辑的id
    const id = $(this).data('id')
    $.ajax({
      url: `/my/article/cates/${id}`,
      success: function(res){
        if(res.status !==0) return layer.msg(res.message,{icon: 5})
        // 将数据回写到表单中
        layui.form.val('form-edit',res.data)
      }
    })
  })
  // 点击'确定修改'更新文章分类数据
  /* 
     【1】给表单注册submit提交事件
     【2】阻止表单的默认行为
     【3】收集表单数据
     【4】对数据进行校验
     【5】发起Ajax请求
     【6】判断请求成功与否
     【7】将数据添加到页面中(重新渲染函数)
     【8】关闭弹出层
  */
  $('body').on('submit','#form-edit',function(e){
    e.preventDefault()
    const data = $(this).serialize()
    $.ajax({
      method: 'post',
      url: '/my/article/updatecate',
      data,
      success: function(res){
        if(res.status !==0) return layer.msg(res.message,{icon: 5})
        layer.msg(res.message,{icon: 6})

        renderArtCateList()
        layer.close(editIndex)
      }
    })
  })

  // 功能五：删除文章分类
  /* 
    【1】给删除按钮注册点击事件
    【2】弹出询问框
    【3】如果点击确定，获取删除的id
    【4】发起Ajax的请求
    【5】判断请求成功与否
    【6】如果成功，将重新渲染
  */
 $('body').on('click','.btn-delete',function(){
   let id = $(this).data('id')
   layer.confirm('你真的要删除么?',{icon:3,title:'提示'}, 
   function(index){
    
     $.ajax({
      url: `/my/article/deletecate/${id}`,
      success: function(res){
        if(res.status !==0) return layer.msg(res.message,{icon: 5})
        layer.msg(res.message,{icon: 6})
        renderArtCateList()

      }
      
     })
     layer.close(index)
  });
 })
})